import { createRoot } from 'react-dom/client';
import * as React from 'react';

// const Loading = () => {
//   return <div>loading</div>;
// };

// const User = React.lazy(() => import('./user'));

// function FunctionComponent() {
//   return (
//     // type: div  Symbol.for("react.suspense")
//     <React.Suspense fallback={<Loading></Loading>}>
//       <User />
//     </React.Suspense>
//   );
// }

class ErrorBoundary extends React.Component<any, any, any> {
  constructor(props: any) {
    super(props);
    this.state = { hasError: false };
  }

  // 返回的值合并到state中去
  static getDerivedStateFromError(error: any) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error: any, errorInfo: any) {
    // 你同样可以将错误日志上报给服务器
    // logErrorToMyService(error, errorInfo);
  }

  render() {
    debugger;
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

function Demo1() {
  // @ts-ignore
  return <div>{num}</div>;
}

function FunctionComponent() {
  return (
    <>
      <ErrorBoundary>
        <Demo1 />
      </ErrorBoundary>
    </>
  );
}

let element = <FunctionComponent />;
const root = createRoot(document.getElementById('root')!);

debugger;
root.render(element);
